<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <link rel="shortcut icon" href="img/favicon.ico">
	<title>sugonTravle</title>
    <style type="text/css">
        body,
        html,
        #allmap {
            width: 100%;
            height: 90%;
            margin: 0;
            font-family: "微软雅黑";
        }
    </style>
    <script type="text/javascript"
        src="https://api.map.baidu.com/api?v=2.0&ak=t0mAlhnDo5ku67d5eExKb81f0P2uovoO"></script>
    <script type="text/javascript" src="https://api.map.baidu.com/library/CurveLine/1.5/src/CurveLine.min.js"></script>
    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
    <link rel="stylesheet" href="layui/css/layui.css">
    <script src="layui/layui.all.js"></script>
</head>

<body>
    <!--<script src="https://www.layuicdn.com/layui-v2.5.5/layui.js"></script>-->
    <div id="allmap"></div>
    <div>
        <table id="demo"></table>
    </div>
</body>

</html>

<script type="text/javascript">
    const webPath = "http://129.204.13.18/";
    // const webPath = "http://127.0.0.1/";
    // var cityId = window.location.href.split("?")[1].split("=")[1];
    var url = location.search;
    // const cityId ="cityId=3";
    const cityId = url.slice(1);
    layui.config({
        base: 'module/'
    }).extend({
        treeTable: 'treeTable/treeTable'
    }).use('treeTable', function () {
        var treeTable = layui.treeTable;
        var $ = layui.jquery;
        $.ajax({
            url: webPath + "city/detail?" + cityId,
            async: false,
            type: "post",
            dataType: "json",
            success: function (data) {
                packages = data.data.children;
                // console.log(packages[0]);

            },
            error: function (data) {
                // $.messager.alert('错误', data.msg);
            }
        });
        //第一个实例
        treeTable.render({
            elem: '#demo'
            , data: packages
            , cols: [ //表头
                { field: 'name', title: '推荐套餐名称', width: 190 },
                { field: 'routeName', title: '路线名称', width: 190 },
                { field: 'nameSight', title: '景点名称' },
            ]
        });
        //以上为请求后端接口部分
        //监听行单击事件（双击事件为：rowDouble）
        treeTable.on('row(demo)', function (obj) {
            sights = obj.data.children
            // console.log("sights:", sights);
            if (!sights[0].children) {
                var map = new BMap.Map("allmap");
                //新建一张地图
                map.enableScrollWheelZoom();
                //使可放大缩小
                var points = [];
                var markers = [];
                var labels = [];
                var lines = [];
                var center_lng = 0
                var center_lat = 0;
                for (var i = 0; i < sights.length; i++) {
                    points[i] = new BMap.Point(parseFloat(sights[i].lat), parseFloat(sights[i].lng));
                    // console.log(points[i]);
                    markers[i] = new BMap.Marker(points[i]);
                    // console.log("markers",markers[i]);
                    map.addOverlay(markers[i]);
                    markers[i].setAnimation(BMAP_ANIMATION_BOUNCE);
                    labels[i] = new BMap.Label(sights[i].nameSight, { offset: new BMap.Size(30, -10) });
                    // console.log("labels",labels[i]);
                    markers[i].setLabel(labels[i]);
                    lines[i] = points[i]
                    center_lng += parseFloat(sights[i].lng)
                    center_lat += parseFloat(sights[i].lat)
                    // console.log(parseFloat(sights[i].lng), parseFloat(sights[i].lat))
                }
                center_lat = center_lat / sights.length
                center_lng = center_lng / sights.length
                center = new BMap.Point(center_lat, center_lng);
                // console.log(center_lat, center_lng)
                // var txg = new BMap.Point(112.981361, 28.183680);
                // var museum = new BMap.Point(112.983414, 28.185198);
                // var center = new BMap.Point(center_lat, center_lng);
                //新建对象
                // console.log(center);
                map.centerAndZoom(center, 15);
                //地图中央
                // for(var i = 0; i < sights.length; i++){
                    
                // }
                // var txg_marker = new BMap.Marker(txg);
                // var museum_marker = new BMap.Marker(museum);
                //新建标记点
                // map.addOverlay(txg_marker);
                // map.addOverlay(museum_marker);
                //添加标记点
                // txg_marker.setAnimation(BMAP_ANIMATION_BOUNCE);
                // museum_marker.setAnimation(BMAP_ANIMATION_BOUNCE);
                //设置动画
                // var txg_label = new BMap.Label("天心阁", { offset: new BMap.Size(30, -10) });
                // txg_marker.setLabel(txg_label);
                // var museum_label = new BMap.Label("长沙简牍博物馆", { offset: new BMap.Size(30, -10) });
                // museum_marker.setLabel(museum_label);
                //添加标签文字
                // var points = [txg, museum];
                var curve = new BMapLib.CurveLine(lines, { strokeColor: "red", strokeWeight: 5, strokeOpacity: 1 });
                //创建弧线对象
                map.addOverlay(curve); //添加到地图中
                curve.enableEditing(); //开启编辑功能

                //标注选中样式
                obj.tr.addClass('layui-table-click').siblings().removeClass('layui-table-click');
            }
        });
    });

</script>